#set(jstree = true)

#@mgtlayout()
#define main()
#set(NAME = '机构')
#set(ROOT_NAME = '机构管理')

<div class="r-row r-rsps">
  <div class="r-col-3">
    <div class="group-col group-col-left">
      <span class="group-root group-root-clicked">#(ROOT_NAME)</span>
      <div class="group-leaf" id="groupTree"></div>
    </div>
  </div>
  <div class="r-col-9">
    <div class="group-col group-col-right">
      <div class="inner-container inner-button inner-inline">
        <a id="btnAddGroup" class="group-button">添加#(NAME)</a>
      </div>
      <div class="inner-container inner-form inner-none">
        <div class="inner-toolbar">
          <div class="inner-form-title"></div>
          <div class="inner-form-button">
          </div>
        </div>
        <div class="inner-container">
          <form id="frmGroupView">

          </form>
        </div>
      </div>
    </div>
  </div>
</div>
#end
#define css()
<style>
  .group-root{
    font-weight: bold;
    color: #676a6c;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 5px 10px;
    margin-left: -5px;
  }

  .group-root:hover {
    background-color: #e7f4f9;
    cursor: pointer;
  }

  .group-root-clicked{
    background: #beebff;
    box-shadow: inset 0 0 1px #999;
  }

  .group-leaf {
    margin-left: 15px;
    margin-top: 2px;
  }

  .group-col {
    border: solid 1px #c5c5c5;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
  }

  .group-col-left {
    margin-right: -25px;
    overflow-y: auto;
    overflow-x: auto;
  }

  .col-resize {
    margin-right: 0px!important;
  }

  .group-col-right {
    margin-left: 0px;
    overflow-y: auto;
    position: relative;
  }

  .group-button {
    border: solid 1px #1ab394;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 20px;
    text-shadow: 0px 0px 3px #a0a0a0;
    background-color: #1ab394;
    color: #FFFFFF;
    font-size: 20px;
    margin: 5px;
    display: inline-block;
    width: 140px;
    text-align: center;
  }

  .group-button:hover {
    color: #FFFFFF;
    border-color: #a99f9a;
    background-color: #a99f9a;
  }

  .inner-view, .inner-edit {
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .inner-form-title {
    font-size: 16px;
    height: 22px;
    line-height: 22px;
    color: #fff;
    font-weight: bold;
    border-bottom: 1px solid;
    text-shadow: 0px 0px 3px #000000;
    margin-top: 5px;
    margin-bottom: 15px;
    display: inline-block;
  }

  .inner-toolbar {
    border-bottom: solid 1px #c5c5c5;
    margin-bottom: 15px;
  }
  .inner-button
  .inner-form-button {
    display: inline-block;
    float: right;
  }

  .inner-form-button .r-button {
    margin-left: 15px;
  }

  .inner-inline {
    display: inline-block;
  }

  .inner-block {
    display: block;
  }

  .inner-none {
    display: none;
  }
</style>
#end

#define js()
#(yx.js("/script/pc/sysmgt/infrastructure/group/index.js"))
#end
